Ext.require(['*']);

Ext.onReady(function() {

    Ext.QuickTips.init();
	
	// Define the model for a State
	Ext.define('State', {
		extend: 'Ext.data.Model',
		fields: [
			{type: 'string', name: 'abbr'},
			{type: 'string', name: 'name'},
			{type: 'string', name: 'slogan'}
		]
	});
	
	// The data for all states
	var states = [
		{"abbr":"AL","name":"Alabama","slogan":"The Heart of Dixie"},
		{"abbr":"AK","name":"Alaska","slogan":"The Land of the Midnight Sun"},
		{"abbr":"AZ","name":"Arizona","slogan":"The Grand Canyon State"},
		{"abbr":"AR","name":"Arkansas","slogan":"The Natural State"},
		{"abbr":"CA","name":"California","slogan":"The Golden State"},
		{"abbr":"CO","name":"Colorado","slogan":"The Mountain State"},
		{"abbr":"CT","name":"Connecticut","slogan":"The Constitution State"},
		{"abbr":"DE","name":"Delaware","slogan":"The First State"},
		{"abbr":"DC","name":"District of Columbia","slogan":"The Nation's Capital"},
		{"abbr":"FL","name":"Florida","slogan":"The Sunshine State"},
		{"abbr":"GA","name":"Georgia","slogan":"The Peach State"},
		{"abbr":"HI","name":"Hawaii","slogan":"The Aloha State"},
		{"abbr":"ID","name":"Idaho","slogan":"Famous Potatoes"},
		{"abbr":"IL","name":"Illinois","slogan":"The Prairie State"},
		{"abbr":"IN","name":"Indiana","slogan":"The Hospitality State"},
		{"abbr":"IA","name":"Iowa","slogan":"The Corn State"},
		{"abbr":"KS","name":"Kansas","slogan":"The Sunflower State"},
		{"abbr":"KY","name":"Kentucky","slogan":"The Bluegrass State"},
		{"abbr":"LA","name":"Louisiana","slogan":"The Bayou State"},
		{"abbr":"ME","name":"Maine","slogan":"The Pine Tree State"},
		{"abbr":"MD","name":"Maryland","slogan":"Chesapeake State"},
		{"abbr":"MA","name":"Massachusetts","slogan":"The Spirit of America"},
		{"abbr":"MI","name":"Michigan","slogan":"Great Lakes State"},
		{"abbr":"MN","name":"Minnesota","slogan":"North Star State"},
		{"abbr":"MS","name":"Mississippi","slogan":"Magnolia State"},
		{"abbr":"MO","name":"Missouri","slogan":"Show Me State"},
		{"abbr":"MT","name":"Montana","slogan":"Big Sky Country"},
		{"abbr":"NE","name":"Nebraska","slogan":"Beef State"},
		{"abbr":"NV","name":"Nevada","slogan":"Silver State"},
		{"abbr":"NH","name":"New Hampshire","slogan":"Granite State"},
		{"abbr":"NJ","name":"New Jersey","slogan":"Garden State"},
		{"abbr":"NM","name":"New Mexico","slogan":"Land of Enchantment"},
		{"abbr":"NY","name":"New York","slogan":"Empire State"},
		{"abbr":"NC","name":"North Carolina","slogan":"First in Freedom"},
		{"abbr":"ND","name":"North Dakota","slogan":"Peace Garden State"},
		{"abbr":"OH","name":"Ohio","slogan":"The Heart of it All"},
		{"abbr":"OK","name":"Oklahoma","slogan":"Oklahoma is OK"},
		{"abbr":"OR","name":"Oregon","slogan":"Pacific Wonderland"},
		{"abbr":"PA","name":"Pennsylvania","slogan":"Keystone State"},
		{"abbr":"RI","name":"Rhode Island","slogan":"Ocean State"},
		{"abbr":"SC","name":"South Carolina","slogan":"Nothing Could be Finer"},
		{"abbr":"SD","name":"South Dakota","slogan":"Great Faces, Great Places"},
		{"abbr":"TN","name":"Tennessee","slogan":"Volunteer State"},
		{"abbr":"TX","name":"Texas","slogan":"Lone Star State"},
		{"abbr":"UT","name":"Utah","slogan":"Salt Lake State"},
		{"abbr":"VT","name":"Vermont","slogan":"Green Mountain State"},
		{"abbr":"VA","name":"Virginia","slogan":"Mother of States"},
		{"abbr":"WA","name":"Washington","slogan":"Green Tree State"},
		{"abbr":"WV","name":"West Virginia","slogan":"Mountain State"},
		{"abbr":"WI","name":"Wisconsin","slogan":"America's Dairyland"},
		{"abbr":"WY","name":"Wyoming","slogan":"Like No Place on Earth"}
	];
	
	var store = Ext.create('Ext.data.Store', {
		model: 'State',
		data: states
	});

    var viewport = Ext.create('Ext.Viewport', {
        id: 'border-example',
        layout: 'border',
        items: [
		Ext.create('Ext.panel.Panel',{
			region : 'west',
			//stateId: 'navigation-panel',
			id: 'west-panel', 
			//split: true,
			width: 600,
			//minWidth: 600,
			//maxWidth: 800,
			//collapsible: true,
			//animCollapse: true,
			margins: '0 0 0 5',
			layout : 'anchor',
			bodyStyle: 'padding:5px',
			tbar : [
				{
					xtype : 'splitbutton',
					text : 'Configuration',
					menu : new Ext.menu.Menu({
						items: [
							{
								text: 'URL Configuration',
								id : 'config-btn',
								handler: function(){ 
									var win;
									var button = Ext.get('config-btn');
									
									// sample static data for the store
									var myData = [
										['www.163.com'],
										['www.wrongurl.com']
									];
									
									// create the data store
									var store = Ext.create('Ext.data.ArrayStore', {	
										fields : [{name : 'urls'}], 
										data: myData
									});
									
									
									if (!win) {											
										win = Ext.create('widget.window', {
											title: 'URL Configuration',
											closable: true,
											closeAction: 'hide',
											width: 600,
											minWidth: 350,
											height: 350,
											layout: 'column',
											bodyStyle: 'padding: 5px;',
											items: [{
												columnWidth : 2/5,
												title: 'Available URL',
												floatable: false,
												xtype : 'panel',
												items : [
														{
															xtype : 'grid',
															store : store,
															columns : [
																{
																	flex     : 1,
																	sortable : false,
																	dataIndex: 'urls'
																}
															]
														}
													]
											}, {
												columnWidth : 1/5,
												floatable: false
											}, {
												columnWidth : 2/5,
												title: 'Checking URL',
												floatable: false
											}]
										});
									}
									button.dom.disabled = true;
									if (win.isVisible()) {
										win.hide(this, function() {
											button.dom.disabled = false;
										});
									} else {
										win.show(this, function() {
											button.dom.disabled = false;
										});
									}
								}
							},
							{text: 'Dprop check Configuration', handler: function(){ alert("Item 2 clicked"); }},
							{text: 'Batch check Configuration', handler: function(){ alert("Item 3 clicked"); }},
							{text: 'Error Key words Configuration', handler: function(){ alert("Item 4 clicked"); }}
						]
					})
				}
			],
			items: [
			    {
					xtype : 'panel',
					anchor : '100% 20%',
					layout : {
						type : 'hbox',
						align : 'middle'
					},
					items : [
						{
							xtype : 'button',
							text : 'Check URL',
							handler : function(){
								alert('Check URL...');
							}
						}
					]
				},{
					xtype: 'panel',
					anchor : '100% 40%',
					layout : {
						type : 'table',
						columns : 3								
					},
					items :[
						{
							xtype : 'combo',
							width: 320,
							store: store,
							displayField: 'name',
							queryMode: 'local',
							typeAhead: true,
							colspan : 2										
						},
						{
							xtype : 'button',
							text : 'Connect',
							handler : function(){
								alert('Dprop Connect Button..');										
							}
						},
						{
							xtype : 'button',
							text : 'Check Dprop',
							handler : function(){
								alert('Check Dprop Button..');										
							}
						}
					]
				},{
					xtype: 'panel',
					anchor : '100% 40%',
					layout : {
						type : 'table',
						columns : 3								
					},
					items :[
						{
							xtype : 'combo',
							width: 320,
							store: store,
							displayField: 'name',
							queryMode: 'local',
							typeAhead: true,
							colspan : 2										
						},
						{
							xtype : 'button',
							text : 'Disconnect',
							handler : function(){
								alert('Dprop Connect Button..');										
							}
						},
						{
							xtype : 'label',
							text : 'batch log',
							colspan : 3
						},
						{
							xtype : 'combo',
							width: 320,
							store: store,
							displayField: 'name',
							queryMode: 'local',
							typeAhead: true,
							colspan : 3
						},
						{
							xtype : 'button',
							text : 'Check Batch Log',
							handler : function(){
								alert('Check Batch Log Button..');										
							}
						}
					]
				}
			]
			}),
        Ext.create('Ext.tab.Panel', {
            region: 'center', // a center region is ALWAYS required for border layout
            deferredRender: false,
            activeTab: 0,     // first tab initially active
            items: [{
                //contentEl: 'center1',
                title: 'URL Report',
                autoScroll: true
            }, {
                //contentEl: 'center2',
                title: 'Dprop Report',
                autoScroll: true
            }, {
                //contentEl: 'center2',
                title: 'Batch Report',
                autoScroll: true
            }]
        })]
    });
});